<!--
<template>
  <div class="section_common">
    <div class="main">
      <el-form ref="form" label-width="100px">
        <el-form-item label="物品编号" required>
          <el-input type="textarea" v-model="number" size="mini"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="submitPost"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>

  import { Toast } from "vant";

export default {
  data() {
    return {
      number:"",

      nowUser: '',
      title: "物品报废录入",

      delInventory: '/mobiles/delInventory',

    };
  },
  created() {
    this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
  },
  methods: {
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 提交
    submitPost() {
      if (!this.isNull()) return false;

      this.$https.post(this.delInventory, {
        number:this.number,

      }).then(res => {
        res.data;
        Toast("推送成功");
        this.$router.go(-1);
      }).catch(err => {
        console.log(err)
      });
    },
    //判断相关数据是否为空
    isNull() {
      if (this.number == '') {
        this.$toast("物品编号不能为空");
        return false;
      }
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  justify-items: center;
  margin: 0 auto;
  .el-form {
    padding-right: 10px;
    .el-form-item {
      .el-form-item__label {
        line-height: 16px;
      }
      margin-bottom: 5px;
    }
  }
}
</style>-->


<template>
    <div class="section_common">
        <div class="main">
            <el-form ref="form" label-width="100px">

                <!--<el-form-item label="所属地区" required>
                    <el-select v-model="area" :filterable="true" size="mini" placeholder="请选择" @change="selectItem">
                        <el-option v-for="(item,index) in areasField" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>-->

                <el-form-item label="区域" required>
                    <el-radio-group v-model="area" @change="changeArea">
                        <el-radio  label="深圳">深圳</el-radio>
                        <el-radio  label="合肥">合肥</el-radio>
                        <el-radio  label="武汉">武汉</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="所属地点" required>
                    <el-select v-model="place" :filterable="true" size="mini" placeholder="请选择" @change="changePlace">
                        <el-option v-for="(item,index) in placeField" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="部门/组别">
                    <el-input v-model="dept" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="使用类型">
                    <el-radio v-model="classification" label="个人">个人</el-radio>
                    <el-radio v-model="classification" label="公共">公共</el-radio>
                </el-form-item>
                <el-form-item label="物品分类" required>
                    <el-radio v-model="type" label="办公用品">办公用品</el-radio>
                    <el-radio v-model="type" label="固定资产">固定资产</el-radio>
                </el-form-item>

                <p>需报废的物品</p>
                <!--<el-form-item label="物品名称" required>
                    <el-input v-model="pname" size="mini"></el-input>
                </el-form-item>-->
                <el-form-item label="物品名称" required><!--multiple-->
                    <el-select v-model="pname" :filterable="true" size="mini" placeholder="请选择" @change="selectItem">
                        <el-option v-for="(item,index) in pnameField" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="物品规格" required>
                    <el-input v-model="specification" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="数量" required>
                    <el-input v-model="number" size="mini"></el-input>
                </el-form-item>
                <el-form-item label="报废原因">
                    <el-input v-model="sqreason" size="mini"></el-input>
                </el-form-item>

                <div class="upload_area">
                    <van-steps direction="vertical" :active="active" active-icon="checked" active-color="#38f">
                        <p style="font-size:16px;font-weight: 900">审批流程</p>

                        <van-step v-if="oneShow">
                            <h3>一级审批</h3>
                            <van-image v-for="(item,index) in onespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>

                        <van-step v-if="twoShow">
                            <h3>二级审批</h3>
                            <van-image v-for="(item,index) in twospusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>

                        <van-step v-if="threeShow">
                            <h3>三级审批</h3>
                            <van-image v-for="(item,index) in threespusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>
                        <van-step v-if="fourShow">
                            <h3>四级审批</h3>
                            <van-image v-for="(item,index) in fourspusers" :key="index" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>

                        <van-step v-show="zdShow">
                            <p style="font-size:16px;font-weight: 900">审批人</p>
                            <van-image v-for="item in twoLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>
                        <van-step v-show="zdrzShow">
                            <p style="font-size:16px;font-weight: 900">审批人</p>
                            <van-image v-for="item in threeLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                            </van-image>
                        </van-step>

                        <!--            <van-step v-show="fourShow">
                                      <p style="font-size:16px;font-weight: 900">副经理</p>
                                      <van-image v-for="item in fourLd" :key="item.name" :src="item.avatar" width="60" height="60" style="margin-right: 20px;margin-bottom: 20px">
                                        <p style="font-size: 10px ;justify-content: center">{{item.name}}</p>
                                      </van-image>
                                    </van-step>-->

                    </van-steps>
                </div>

                <el-form-item>
                    <el-button type="primary" size="mini" @click="submitPost">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import {Toast, Calendar,Form ,Picker,Popup} from "vant";
    import { Image as VanImage } from 'vant';
    Vue.use(VanImage);
    Vue.use(Calendar);
    Vue.use(Form);
    Vue.use(Picker);
    Vue.use(Popup);
    export default {
        data() {
            return {
                area:"",
                place:"",
                placeField:[],
                type:"",
                dept:"",
                classification:"个人",
                pname:"",
                pnameField:[],
                number:"",
                specification:"",
                sqreason:"",
                nowUser:"",
                title: "物品报废申请",
                addScrapApply: '/mobiles/addInvscrapApply',

                active:"-1",//步骤索引,从0开始
                oneShow:false,
                twoShow:false,
                threeShow:false,
                fourShow:false,
                onespusers:[],
                twospusers:[],
                threespusers:[],
                fourspusers:[],

                zdShow:true,
                twoLd:[],
                zdrzShow:true,
                threeLd:[],
            };
        },
        created() {
            this.nowUser=JSON.parse(localStorage.getItem('userInfo')).userId;
            var jobnumid=JSON.parse(localStorage.getItem('userInfo')).jobNumId;
            if (jobnumid.indexOf("HF")!=-1){
                this.area="合肥"
            }else if (jobnumid.indexOf("WH")!=-1){
                this.area="武汉"
            }else {
                this.area="深圳"
            }
            this.getAllPlace();
            this.getLd();
        },
        methods: {

            //查找对应用户的上级领导进行审批
            getLd(){
                this.$https.post('/mobiles/getInvScrapSp',{
                    nowUser:this.nowUser,
                }).then((res)=>{

                    if (res.data.data.onespusers && res.data.data.onespusers.length>0){
                        this.oneShow=true;
                        this.onespusers=res.data.data.onespusers;
                    }else{
                        this.oneShow=false;
                        this.onespusers=[];
                    }
                    if (res.data.data.twospusers && res.data.data.twospusers.length>0){
                        this.twoShow=true;
                        this.twospusers=res.data.data.twospusers;
                    }else{
                        this.twoShow=false;
                        this.twospusers=[];
                    }
                    if (res.data.data.threespusers && res.data.data.threespusers.length>0){
                        this.threeShow=true;
                        this.threespusers=res.data.data.threespusers;
                    }else{
                        this.threeShow=false;
                        this.threespusers=[];
                    }
                    if (res.data.data.fourspusers && res.data.data.fourspusers.length>0){
                        this.fourShow=true;
                        this.fourspusers=res.data.data.fourspusers;
                    }else{
                        this.fourShow=false;
                        this.fourspusers=[];
                    }

                    if (res.data.data.twoLd.length>0){
                        this.zdShow=true;
                        this.twoLd=res.data.data.twoLd;
                    }
                    if (res.data.data.threeLd.length>0){
                        this.zdrzShow=true;
                        this.threeLd=res.data.data.threeLd;
                    }
                }).catch(err => {
                    console.log(err);
                })
            },

            formatArea(data,curr){
                if(data){
                    for(let i=0;i<data.length;i++){
                        console.log(data[i])
                        curr.push({
                            label:data[i],
                            value:data[i],
                        })
                    }
                    console.log(curr)
                }
            },

            //获取所有相关地区
            getAllPlace(){
                this.$https.post('/mobiles/selInventoryPlace',{
                    nowUser:this.nowUser,
                    area:this.area
                }).then((res)=>{
                    this.placeField=[];
                    this.formatArea(res.data,this.placeField);
                }).catch(err => {
                    console.log(err);
                })
            },
            changeArea(value){
                this.area=value;
                this.place="";
                this.getAllPlace();
            },

            changePlace(value){
                this.place=value;
                this.pname="";
                this.getAllItems();
            },
            //获取相关物品和审批人
            getAllItems(){
                this.pnameField=[];
                this.pname="";
                this.$https.post('/mobiles/selItems',{
                    area:this.area,
                    place:this.place
                }).then((res)=>{
                    /*this.itemsList=res.data;
                    for(var i=0;i<this.itemsList.length;i++){
                      this.itemsField.push(this.itemsList[i].goods);
                    }*/
                    this.formatLacation(res.data.items,this.pnameField,'goods','goods');

                }).catch(err => {
                    console.log(err);
                })
            },
            formatLacation(data,curr,foo,id){
                if(data){
                    for(let i=0;i<data.length;i++){
                        curr.push({
                            label:data[i][foo],
                            value:data[i][id],
                        })
                    }
                }
            },
            //点击选中的物品
            selectItem(value){
                this.pname=value;
            },
            // 返回
            goBack() {
                this.$router.go(-1);
            },
            // 提交
            submitPost() {
                if (!this.isNull()) return false;

                this.$https.post(this.addScrapApply, {
                    nowUser:this.nowUser,
                    area:this.area,
                    place:this.place,
                    type:this.type,
                    dept:this.dept,
                    pname:this.pname,
                    number: this.number,
                    specification:this.specification,
                    classification:this.classification,
                    sqreason:this.sqreason,

                }).then(res => {
                    if (res.data.code==500){
                        this.$toast(res.data.message);
                    }
                    if (res.data.code==200){
                        Toast("提交成功");
                        this.$router.go(-1);
                    }
                }).catch(err => {
                    console.log(err)
                });
            },
            //判断相关数据是否为空
            isNull() {
                if (this.area == '') {
                    this.$toast("请选择区域");
                    return false;
                }
                if (this.place == '') {
                    this.$toast("请选择所属地点");
                    return false;
                }
                if (this.type=='') {
                    this.$toast("请选择分类");
                    return false;
                }
                if (this.dept=='') {
                    this.$toast("请选择部门/区域");
                    return false;
                }

                if (this.productname=='') {
                    this.$toast("物品名称不能为空");
                    return false;
                }
                if (this.specification=='') {
                    this.$toast("物品规格不能为空");
                    return false;
                }
                if (this.number=='') {
                    this.$toast("数量不能为空");
                    return false;
                }
                return true;
            },
        },
    };
</script>

<style lang="scss" scoped>
    .main {
        background-color: white;
        .el-form {
            padding-right: 10px;
            .el-form-item {
                .el-form-item__label {
                    line-height: 16px;
                }
                margin-bottom: 5px;
            }
        }
    }
</style>
